<!DOCTYPE html><!--
|                   _
|    /|           / / |\
|   / |          / /  | \
|  / /          / /    \ \
|  \ \    ___  / /     / /
|   \ |  /   \/ /     | /
|    \| |      /      |/
|        \____/
|
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Chrome Tabs - Chrome-style Tabs in HTML/CSS/ES6</title>
    <meta name="description" content="Chrome-style tabs in HTML/CSS/JS.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="demo/css/demo.css" rel="stylesheet">
    <link href="css/chrome-tabs.css" rel="stylesheet">
    <link href="css/chrome-tabs-dark-theme.css" rel="stylesheet">
  </head>
  <body>
    <div class="surface">
      <div class="mock-browser">
        <div class="chrome-tabs" style="--tab-content-margin: 9px">
          <div class="chrome-tabs-content">
            <div class="chrome-tab">
              <div class="chrome-tab-dividers"></div>
              <div class="chrome-tab-background">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><symbol id="chrome-tab-geometry-left" viewBox="0 0 214 36"><path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"/></symbol><symbol id="chrome-tab-geometry-right" viewBox="0 0 214 36"><use xlink:href="#chrome-tab-geometry-left"/></symbol><clipPath id="crop"><rect class="mask" width="100%" height="100%" x="0"/></clipPath></defs><svg width="52%" height="100%"><use xlink:href="#chrome-tab-geometry-left" width="214" height="36" class="chrome-tab-geometry"/></svg><g transform="scale(-1, 1)"><svg width="52%" height="100%" x="-100%" y="0"><use xlink:href="#chrome-tab-geometry-right" width="214" height="36" class="chrome-tab-geometry"/></svg></g></svg>
              </div>
              <div class="chrome-tab-content">
                <div class="chrome-tab-favicon" style="background-image: url('demo/images/google-favicon.ico')"></div>
                <div class="chrome-tab-title">Google</div>
                <div class="chrome-tab-drag-handle"></div>
                <div class="chrome-tab-close"></div>
              </div>
            </div>
            <div class="chrome-tab" active>
              <div class="chrome-tab-dividers"></div>
              <div class="chrome-tab-background">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><symbol id="chrome-tab-geometry-left" viewBox="0 0 214 36"><path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"/></symbol><symbol id="chrome-tab-geometry-right" viewBox="0 0 214 36"><use xlink:href="#chrome-tab-geometry-left"/></symbol><clipPath id="crop"><rect class="mask" width="100%" height="100%" x="0"/></clipPath></defs><svg width="52%" height="100%"><use xlink:href="#chrome-tab-geometry-left" width="214" height="36" class="chrome-tab-geometry"/></svg><g transform="scale(-1, 1)"><svg width="52%" height="100%" x="-100%" y="0"><use xlink:href="#chrome-tab-geometry-right" width="214" height="36" class="chrome-tab-geometry"/></svg></g></svg>
              </div>
              <div class="chrome-tab-content">
                <div class="chrome-tab-favicon" style="background-image: url('demo/images/facebook-favicon.ico')"></div>
                <div class="chrome-tab-title">Facebook</div>
                <div class="chrome-tab-drag-handle"></div>
                <div class="chrome-tab-close"></div>
              </div>
            </div>
          </div>
          <div class="chrome-tabs-bottom-bar"></div>
          <!-- Styles to prevent flash after JS initialization -->
          <style>
            .chrome-tabs .chrome-tab {
              width: 258px
            }

            .chrome-tabs .chrome-tab:nth-child(1) {
              transform: translate3d(0px, 0, 0)
            }

            .chrome-tabs .chrome-tab:nth-child(2) {
              transform: translate3d(239px, 0, 0)
            }
          </style>
        </div>
        <div class="chrome-tabs-optional-shadow-below-bottom-bar"></div>
        <div class="mock-browser-content">
          <div class="buttons">
            <button data-theme-toggle>Toggle dark theme</button>
            <button data-add-tab>Add new tab</button>
            <button data-add-background-tab>Add tab in the background</button>
            <button data-remove-tab>Remove active tab</button>
          </div>
        </div>
      </div>

      <div class="carbonads-wrapper">
        <script async="true" id="_carbonads_js" src="https://cdn.carbonads.com/carbon.js?serve=CKYILKQE&placement=adamschwartzco"></script>
      </div>

      <style>
        .made-by {
          margin-top: auto;
          --active-background-color: #dee1e6;
          color: #848890;
          font-size: 14px;
          font-family: Avenir, "Avenir Next", "Segoe UI", Arial, "Helvetica Neue", Helvetica, sans-serif;
          text-align: center;
          -webkit-font-smoothing: antialiased;
          font-weight: bold;
        }

        html.dark-theme .made-by {
          --active-background-color: #242628;
          color: #838488;
        }

        .made-by-link { color: inherit; text-decoration: none; display: inline-block; padding: 1em; border-radius: .5em }
        .made-by-link:hover:not(:active) { opacity: .7 }
        .made-by-link:hover:active { background: var(--active-background-color) }
        .made-by-logo { display: block; height: 3.5em; width: 7em; margin: 0 auto .75em }
      </style>

      <div class="made-by">
        <a href="https://adamschwartz.co" class="made-by-link">
          <svg class="made-by-logo" viewBox="0 0 222 127" role="img" aria-label="Adam Schwartz logo" fill="currentColor"><path d="M87.1 117C73.6 117 62.8 108.7 63 99 63.2 89.3 74.2 81.6 87.7 81.8 95.2 82 101.8 84.5 106.2 88.4 106.3 88.3 140.7 25.5 140.7 25.5L162.4 10 112.4 102.2C112 102.8 105 117 87.1 117Z" class="music-note"></path><path d="M56 20L56 36.6 32 59 56 80 56 98 10 59 56 20 56 20Z" class="less-than"></path><path d="M166 37L190 59 166 80 166 98 212 59 166 20 166 37 166 37Z" class="greater-than"></path></svg>
          <div class="made-by-text">Made by Adam Schwartz</div>
        </a>
      </div>
    </div>

    <script src="https://unpkg.com/draggabilly@2.2.0/dist/draggabilly.pkgd.min.js"></script>
    <script src="js/chrome-tabs.js"></script>
    <script>
      var el = document.querySelector('.chrome-tabs')
      var chromeTabs = new ChromeTabs()

      chromeTabs.init(el)

      el.addEventListener('activeTabChange', ({ detail }) => console.log('Active tab changed', detail.tabEl))
      el.addEventListener('tabAdd', ({ detail }) => console.log('Tab added', detail.tabEl))
      el.addEventListener('tabRemove', ({ detail }) => console.log('Tab removed', detail.tabEl))

      document.querySelector('button[data-add-tab]').addEventListener('click', _ => {
        chromeTabs.addTab({
          title: 'New Tab',
          favicon: false
        })
      })

      document.querySelector('button[data-add-background-tab]').addEventListener('click', _ => {
        chromeTabs.addTab({
          title: 'New Tab',
          favicon: false
        }, {
          background: true
        })
      })

      document.querySelector('button[data-remove-tab]').addEventListener('click', _ => {
        chromeTabs.removeTab(chromeTabs.activeTabEl)
      })

      document.querySelector('button[data-theme-toggle]').addEventListener('click', _ => {
        if (el.classList.contains('chrome-tabs-dark-theme')) {
          document.documentElement.classList.remove('dark-theme')
          el.classList.remove('chrome-tabs-dark-theme')
        } else {
          document.documentElement.classList.add('dark-theme')
          el.classList.add('chrome-tabs-dark-theme')
        }
      })

      window.addEventListener('keydown', (event) => {
        if (event.ctrlKey && event.key === 't') {
          chromeTabs.addTab({
            title: 'New Tab',
            favicon: false
          })
        }
      })
    </script>
  </body>
</html>
